<template>
  <div class="box">
    <el-card v-if="dialogVisible3" class="box-card">
      <!-- 按钮 -->
      <el-row type="flex" justify="end">
        <el-button
          type="primary"
          plain
          size="small"
          @click="dialogVisible3 = false"
          >创建考试</el-button
        >
      </el-row>
      <br />
      <!-- 查询 -->
      <el-form ref="form" label-width="100px" :inline="true">
        <el-form-item label="考试名称">
          <el-input
            style="width: 190px"
            v-model="queryData.exam_name"
            size="small"
            placeholder="考试名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="学科名称">
          <el-select
            clearable
            @focus="getSubject"
            v-model="queryData.subject_id"
            size="small"
            placeholder="归属学科"
            @change="change1"
          >
            <el-option
              v-for="item in subject"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学科名称">
          <el-select
            clearable
            v-model="queryData.directory_id"
            size="small"
            placeholder="归属目录"
          >
            <el-option
              v-for="item in directory"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option
          ></el-select>
        </el-form-item>
        <el-form-item label="考试类型">
          <el-select clearable v-model="queryData.exam_type" size="small">
            <el-option label="阶段考试" :value="1"></el-option>
            <el-option label="综合考试" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="锁屏方式">
          <el-select clearable v-model="queryData.lock_screen" size="small">
            <el-option label="不锁屏" :value="1"></el-option>
            <el-option label="锁屏" :value="2"></el-option
          ></el-select>
        </el-form-item>
        <el-form-item label="创建人" label-width="85px">
          <el-input
            style="width: 190px"
            v-model="queryData.create_name"
            size="small"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="创建时间" label-width="115px">
          <el-date-picker
            style="width: 250px"
            size="small"
            v-model="queryData.create_time"
            @change="change"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            plain
            style="margin-left: 110px"
            @click="initData"
            >搜索</el-button
          >
          <el-button size="small" plain @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <div class="box1">
        <el-table
          :data="list"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#fafafa', color: '#646464' }"
        >
          <el-table-column label="序号" type="index" width="60" align="center">
          </el-table-column>
          <el-table-column label="考试信息" align="center">
            <template slot-scope="{ row }" ref="row.main_paper_name">
              <p class="one">
                考试ID:<b>{{ row.id }}</b
                >考试名称:<a href="javascript:;"
                  ><span class="one2">{{ row.exam_name }}</span></a
                >归属学科:<b>{{ row.subject_name }}</b
                >归属目录:<b>{{ row.directory_name }}</b>
              </p>
              <p class="one">
                考试类型:<b v-if="row.exam_type === 1">阶段考核</b
                ><b v-if="row.exam_type === 2">综合考试</b>考试方式:<b
                  v-if="row.lock_screen === 1"
                  >不锁屏</b
                ><b v-if="row.lock_screen === 2">锁屏</b>创建人:<b>{{
                  row.create_name
                }}</b
                >创建时间:<b>{{ row.created_at | formatDate }}</b
                >试卷信息:<span class="one1"
                  ><el-button type="text" @click="clickFn(row.main_paper_name)"
                    ><el-tag>点击查看</el-tag></el-button
                  ></span
                >推送班级信息:<b
                  ><el-button type="text" @click="clickFn1(row.exam_bind_class)"
                    ><el-tag v-if="row.exam_bind_class.length !== 0"
                      >点击查看</el-tag
                    ><span v-else class="one3">暂无</span></el-button
                  ></b
                >
              </p>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="140" align="center">
            <template slot-scope="{ row }">
              <el-tooltip content="推送班级" placement="top">
                <el-button
                  @click="clickFn2(row)"
                  type="warning"
                  icon="el-icon-connection"
                  size="mini"
                  circle
                ></el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button
                  v-if="row.exam_bind_class.length === 0"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="clickFn4(row.id)"
                  size="mini"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <br />
      <el-row type="flex" justify="end">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryData.page"
          :page-sizes="[2, 5, 10]"
          :page-size="queryData.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
      <!-- 考试信息弹框 -->
      <el-dialog
        title="考试试卷信息"
        :visible.sync="dialogVisible"
        width="30%"
        v-if="dialogVisible"
      >
        <span class="one1">主考试卷:</span>
        <span style="color: #409eff">{{ rowData }}</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false" size="small"
            >关闭</el-button
          ></span
        >
      </el-dialog>
      <!-- 推送班级信息弹框 -->
      <el-dialog
        title="已推送信息"
        :visible.sync="dialogVisible1"
        width="920px"
        v-if="dialogVisible1"
      >
        <el-table :data="rowdata" style="width: 100%" border>
          <el-table-column prop="class_name" label="班级名称" width="200">
          </el-table-column>
          <el-table-column label="考试状态">
            <template slot-scope="{ row }">
              <p>
                <b style="color: #409eff">主考:</b>
                <span v-if="row.exam_time_date === null">带设定时间</span>
                <span v-else
                  >待考试 | {{ row.exam_time_date | formatDate }}</span
                >
              </p>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="{ row }">
              <span v-if="row.exam_time_date !== null">暂无操作</span>
              <el-button type="text" v-else @click="delClick(row)"
                >解除绑定</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer">
          <el-button type="primary" size="small" @click="dialogVisible1 = false"
            >关闭</el-button
          >
        </div>
      </el-dialog>
      <!-- 班级列表弹框 -->
      <el-dialog title="班级列表" :visible.sync="dialogVisible2" width="450px">
        <el-radio-group v-model="model" @change="change">
          <div
            v-for="item in classList"
            :key="item.id"
            style="padding: 0 0 20px 60px"
          >
            <el-radio :label="item.id">{{ item.class_name }}</el-radio>
          </div>
        </el-radio-group>
        <div slot="footer">
          <el-button type="primary" size="small" @click="clickFn3"
            >确定</el-button
          >
        </div>
      </el-dialog>
    </el-card>
    <!-- 创建考试 -->
    <el-card v-else>
      <div class="box2">
        <span>创建考试</span>
        <!-- 按钮 -->
        <span
          ><el-button
            type="primary"
            plain
            size="small"
            @click="dialogVisible3 = true"
            >返回列表</el-button
          ></span
        >
      </div>
      <el-form
        :model="formData"
        :rules="formRules"
        ref="form"
        label-width="300px"
      >
        <el-form-item label="考试名称" prop="exam_name">
          <el-input
            v-model="formData.exam_name"
            style="width: 520px"
            placeholder="请输入考试名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="考试类型" prop="exam_type">
          <el-radio v-model="formData.exam_type" label="1">阶段测试</el-radio>
          <el-radio v-model="formData.exam_type" label="2">综合考试</el-radio>
        </el-form-item>
        <el-form-item label="锁屏方式" prop="lock_screen">
          <el-radio v-model="formData.lock_screen" label="1">不锁屏</el-radio>
          <el-radio v-model="formData.lock_screen" label="2">锁屏</el-radio>
        </el-form-item>
        <el-form-item label="归属学科" prop="subject_id">
          <el-select
            style="width: 220px"
            clearable
            @focus="getSubject"
            v-model="formData.subject_id"
            placeholder="归属学科"
            @change="change1"
          >
            <el-option
              v-for="item in subject"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="归属目录" prop="directory_id">
          <el-select
            style="width: 220px"
            clearable
            v-model="formData.directory_id"
            placeholder="归属目录"
            @change="change2"
          >
            <el-option
              v-for="item in directory"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option
          ></el-select>
        </el-form-item>
        <el-form-item label="考试时长">
          <el-input-number
            v-model="formData.exam_time"
            :min="1"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="试卷信息" prop="main_paper_id">
          <el-select
            style="width: 220px"
            clearable
            v-model="formData.main_paper_id"
            placeholder="选择主考信息"
          >
            <el-option
              v-for="item in PaperList"
              :key="item.id"
              :label="item.paper_name"
              :value="item.id"
            ></el-option
          ></el-select>
        </el-form-item>
        <el-form-item label-width="300px">
          <el-button type="primary" @click="chuangjian">立即创建</el-button>
          <el-button @click="chongzhi">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import {
  getExamListApi,
  bindClassApi,
  getSubjectListApi,
  getDirectoryListApi,
  getClassListApi,
  delClassListApi,
  getPaperListApi,
  getExamApi,
} from "@/api/exam/exam";

export default {
  data() {
    return {
      list: [], // 表格数据
      queryData: {
        exam_name: "",
        directory_id: "",
        exam_type: "",
        lock_screen: "",
        create_name: "",
        create_time: "",
        page: 1,
        limit: 10,
      },
      formData: {
        exam_name: "",
        exam_type: "1",
        lock_screen: "1",
        subject_id: "",
        directory_id: "",
        exam_time: 30,
        main_paper_id: "",
      },
      formRules: {
        exam_name: [
          { required: true, message: "请输入考试名", trigger: "blur" },
        ],
        exam_type: [{ required: true, message: "请选择", trigger: "blur" }],
        lock_screen: [{ required: true, message: "请选择", trigger: "blur" }],
        subject_id: [
          { required: true, message: "请选择学科", trigger: "blur" },
        ],
        directory_id: [
          { required: true, message: "请选择目录", trigger: "blur" },
        ],
        main_paper_id: [
          { required: true, message: "请选择试卷", trigger: "blur" },
        ],
      },
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: true,
      rowData: [],
      rowdata: [],

      total: 0, // 总数x
      subject: [], // 学科名称
      directory: [], // 学科目录
      classList: [], // 班级列表
      PaperList: [], // 试卷信息
      SubjectId: "", // 学科名称ID
      DirectoryId: "", // 学科名称ID

      model: "",
      class_id: "",
      exam_id: "",
      main_paper_id: "",
    };
  },
  created() {
    this.initData();
    this.getDirectory();
  },
  methods: {
    // 获取列表数据
    async initData() {
      let { list, total } = await getExamListApi(this.queryData);
      this.list = list;
      this.total = total;
    },
    // 分页
    handleSizeChange(val) {
      this.queryData.limit = val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.queryData.page = val;
      this.initData();
    },
    // 考试信息弹框
    clickFn(val) {
      this.dialogVisible = true;
      this.rowData = val;
    },
    // 推送班级信息弹框
    clickFn1(val) {
      this.dialogVisible1 = true;
      this.rowdata = val;
    },
    // 解除绑定
    async delClick(val) {
      await this.$confirm("确定解绑吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      await bindClassApi({
        class_id: val.class_id,
        del: true,
        exam_id: val.exam_id,
      });
      this.$message.success("解绑成功");
      this.dialogVisible1 = false;
      this.initData();
    },
    // 学科名称
    async getSubject() {
      let res = await getSubjectListApi();
      this.subject = res;
    },
    change1(val) {
      this.SubjectId = val;
      if (!val) return (this.queryData = {});
      for (let i = 0; i < this.subject.length; i++) {
        let b = this.subject[i];
        if (val === b.id) {
          this.directory = b.children;
        }
      }
    },
    // 学科目录
    async getDirectory() {
      let { list } = await getDirectoryListApi();
      this.directory = list;
    },
    change2(val) {
      this.DirectoryId = val;
      for (let i = 0; i < this.directory.length; i++) {
        let b = this.directory[i];
        if (val === b.id) {
          this.PaperList = b.children;
        }
      }
      this.getPaper();
    },
    // // 试卷信息
    async getPaper() {
      let { list } = await getPaperListApi({
        subject_id: this.formData.sybject_id,
        directory_id: this.formData.directory_id,
        show_state: 1,
      });
      this.PaperList = list;
    },
    change(val) {
      let arr = val.join(",");
      this.queryData.create_time = arr;
    },
    // 重置
    reset() {
      this.queryData = {};
      this.initData();
    },
    // 获取班级列表
    async clickFn2(val) {
      this.dialogVisible2 = true;
      this.exam_id = val.exam_bind_class;
      let { list } = await getClassListApi({
        subject_id: val.subject_id,
        state: 1,
      });
      this.classList = list;
      this.main_paper_id = val.main_paper_id;
      this.exam_id = val.id;
    },
    // 推送班级信息
    change(val) {
      this.class_id = val;
    },
    async clickFn3() {
      this.dialogVisible = false;
      await bindClassApi({
        class_id: this.class_id,
        exam_id: this.exam_id,
        main_paper_id: this.main_paper_id,
      });
      this.dialogVisible2 = false;
      this.$message.success("推送成功");
      this.initData();
    },
    // 删除
    async clickFn4(id) {
      await this.$confirm("确定删除吗,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      await delClassListApi(id);
      console.log(id);
      this.$message.success("删除成功");
      this.initData();
    },
    // 创建考试重置
    chongzhi() {
      this.formData = {
        exam_name: "",
        exam_type: "1",
        lock_screen: "1",
        subject_id: "",
        directory_id: "",
        exam_time: 30,
        main_paper_id: "",
      };
    },
    // 创建考试
    async chuangjian() {
      await this.$refs.form.validate();
      await getExamApi(this.formData);
      this.$message.success("新增考试成功");
      this.dialogVisible3 = true;
      this.initData();
    },
  },
};
</script>
<style  >
.el-form-item__label {
  font-weight: 700;
}
.box {
  margin: 20px;
}
.box1 {
  margin: 0 10px 0 30px;
}
.one {
  text-align: left;
}
b {
  margin-right: 20px;
  font-weight: 400;
  color: #666;
}
a {
  margin-right: 20px;
}
.one1 {
  margin-right: 20px;
}
.one2 {
  color: #409eff;
}
.el-tag {
  height: 20px;
  padding: 0 5px;
  line-height: 19px;
}
.one3 {
  color: #666;
}
.box2 {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  margin-bottom: 20px;
}
</style>